<template>
  <div>
    <el-container>
      <!--侧边导航兰-->
      <el-aside width="220px">
        <div>
          <el-row class="demo-avatar demo-basic" style="height: 700px">
            <div class="block" v-if="user" style="margin-top: 10px">
              <el-avatar v-if="user.role != 1" :size="100" :src="user.image" :title="user.username"/>
              <el-avatar v-if="user.role == 1" :size="70" :src="user.image" :title="user.username"/>
            </div>
            <div>
              <el-collapse-item v-for="navigation in userNavigation" :key="navigation.name" :title="navigation.name">
              </el-collapse-item>
              <el-radio-group v-model="isCollapse">
                <el-radio :label="false">展开</el-radio>
                <el-radio :label="true">收起</el-radio>
              </el-radio-group>
              <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse">
                <el-menu-item  @click="load(item)" :key="item.id" :index="item.id" v-for="item in userNavigation">
                  <i class="el-icon-s-comment" v-if="item.name == '站内通知'"></i>
                  <i class="el-icon-user-solid" v-if="item.name == '基本信息'"></i>
                  <i class="el-icon-edit" v-if="item.name == '创作中心'"></i>
                  <i class="el-icon-pie-chart" v-if="item.name == '文章统计'"></i>
                  <i class="el-icon-loading" v-if="item.name == '创作者管理'"></i>
                  <i class="el-icon-document" v-if="item.name == '设定管理'"></i>
                  <i class="el-icon-folder-opened" v-if="item.name == '小说管理'"></i>
                  <i class="el-icon-bangzhu" v-if="item.name == '积分管理'"></i>
                  <i class="el-icon-wind-power" v-if="item.name == '日志管理'"></i>
                  <i class="el-icon-place" v-if="item.name == '权限管理'"></i>
                  <span slot="title">{{item.name}}</span>
                </el-menu-item>
              </el-menu>
            </div>
          </el-row>

        </div>
      </el-aside>
      <el-container>
        <el-header style="height: 120px">
          <div style="float: left;height: 40px">
            <!--登出按钮-->
            <el-button icon="fa fa-unlink" title="登出" @click="logoOut" circle></el-button>
          </div>
          <div style="height: 40px;margin-top: 40px">{{user.username}}的空间</div>
          <div style="height: 40px">
            <el-button style="float: left" title="回到四方" @click="gohome" icon="fa fa-home" circle></el-button>
          </div>
        </el-header>
        <el-main>
          <!--显示内容-->
          <div>Main</div>
        </el-main>
        <el-footer>
          <!--友情链接-->
          <div>Footer</div>
        </el-footer>
      </el-container>
    </el-container>
  </div>

</template>

<script>
  export default {
    name: "userhome",
    data() {
      return {
        isCollapse: false,
        userNavigation: "",
        user: '',
      }
    },
    methods: {
      //回到主站
      gohome() {
        this.$router.push('/home')
      },
      //登出
      logoOut() {
        var token = sessionStorage.getItem("token");
        if (token) {
          token = JSON.parse(token)
        } else {
          token = localStorage.getItem("token");
        }
        this.$http.post("/user/logout", token)
        sessionStorage.removeItem("user");
        sessionStorage.removeItem("token");
        localStorage.removeItem("user");
        localStorage.removeItem("token");
        this.$router.push("/home")
      },
      /*弹出当前功能页面*/
      load(e) {
        alert("查询" + e.name)
      },
      //获取当前角色的权限导航栏
      getUserNavigation() {
        console.log(this.user.role)
        this.$http.get("/user/navigation/" + this.user.role)
          .then(result => {
              this.userNavigation = result.data;
            }
          )
          .catch(

          )
      },
      getLoginUser() {
        //处理储存的用户数据
        var logininfo = sessionStorage.getItem("user");
        if (logininfo) {
          logininfo = JSON.parse(logininfo);
          //写入页面模型层
          this.user = logininfo;
        } else {
          logininfo = localStorage.getItem("user");
          logininfo = JSON.parse(logininfo);
          this.user = logininfo;
        }
      }
    },
    mounted() {
      this.getLoginUser();
      this.getUserNavigation();
    }
  }
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
</style>
